<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>账目图表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="topIMG">
      <div id="main" style="width: 600px; height: 400px"></div>
      <div id="pieChart" style="width: 400px;height: 400px; margin-top: 50px; margin-left: 50px;"></div>   
    </el-card>

    <el-card>
      <div id="lineChart" style="height: 400px"></div>
    </el-card>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 用于保存 ECharts 实例
      transactions: [], // 用于存储请求获取的 transaction 数据
    };
  },
  mounted() {
    this.fetchData(window.sessionStorage.getItem("userId")); // 请求数据

    // //基于准备好的dom 初始化echart实例
    // var myChart = echarts.init(document.getElementById('main'))

    // //准备数据和配置项
    // var option={
    //   title:{
    //     text:'Echarts'
    //   },
    //   tooltip:{},
    //   legend:{
    //     data:['销量']
    //   },
    //   xAxis:{
    //     data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //   },
    //   yAxis:{},
    //   series:[{
    //     name:'销量',
    //     type:'bar',
    //     data:[5,20,36,10,10,20]
    //   }]

    // }

    // //展示数据
    // myChart.setOption(option)
  },
  methods: {
    async fetchData(id) {
      const { data: res } = await this.$http.get(`transactionsList1/${id}`);
      this.transactions = res; // 假设返回的数据是数组格式
      this.initChart(); // 使用获取的数据初始化图表
      console.log(this.transactions);
    },
    initChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(document.getElementById('main'));
      const option = this.formatOption(this.transactions);
      this.myChart.setOption(option);

       // 初始化折线图
      const lineChart = echarts.init(document.getElementById('lineChart'));
      const lineOption = this.formatLineOption(this.transactions);
      lineChart.setOption(lineOption);

       // 初始化饼图
       const pieChart = echarts.init(document.getElementById('pieChart'));
      const pieOption = this.formatPieOption(this.transactions);
      pieChart.setOption(pieOption);
    
    },
    formatOption(data) {
      // 确保数据不为空
      if (!data || data.length === 0) {
        return {
          title: {
            text: '没有数据可供显示',
            left: 'center',
            textStyle: {
              color: '#ccc'
            }
          }
        };
      }

      const xAxisData = data.map(item => item.categoryName);
      const seriesData = data.map(item => item.amount);

      return {
        title: {
          text: '账目-分类表',
          left: 0, // 标题居左显示
          textStyle: {
            color: '#666', // 标题颜色
            fontSize: 18 // 标题字号
          }
        },
        tooltip: {
          trigger: 'axis',//悬停触发
          axisPointer: {
            type: 'shadow'//轴指示器以阴影形式显示
          }
        },
        legend: {
          data: ['金额'],
          orient: 'vertical', // 图例垂直显示
          left: 'right', // 图例靠右
          top: 'middle', // 图例居中
          textStyle: {
            color: '#666' // 图例文字颜色
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            interval: 0, // 确保所有标签都显示
            rotate: 45 // 如果标签文字太长，可以旋转一定角度
          },
          axisLine: {
            lineStyle: {
              color: '#666' // 坐标轴线颜色
            }
          },
          axisTick: {
            show: false//刻度标记隐藏
          }
        },
        yAxis: {
          type: 'value',//数值轴
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: '#666' // 坐标轴线颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#eaeef2'] // 网格线颜色
            }
          }
        },
        series: [{
          name: '金额',
          type: 'bar',
          data: seriesData,
          itemStyle: {
            normal: {
              color: function(params) {
                return '#3398DB'; // 统一柱子颜色
              },
              barBorderRadius: 5 // 设置柱子圆角
            }
          }
        }],
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        }
      };
    },
    //折线图
    formatLineOption(data) {
      const xAxisData = data.map((item, index) => `第${index + 1}次交易`);
      const seriesData = data.map(item => item.amount);

      return {
        title: {
          text: '交易金额折线图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '金额',
          type: 'line',
          data: seriesData,
          smooth: true, // 折线图平滑
          itemStyle: {
            normal: {
              color: '#3398DB' // 折线点颜色
            }
          },
          lineStyle: {
            color: '#3398DB' // 折线颜色
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      };
    },
    //bingtu
    formatPieOption(data) {
      const categoryAmount = data.reduce((acc, item) => {
        acc[item.categoryName] = (acc[item.categoryName] || 0) + item.amount;
        return acc;
      }, {});

      const pieData = Object.entries(categoryAmount).map(([category, amount]) => ({
        name: category,
        value: amount
      }));

      return {
        title: {
          text: '收入占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: pieData.map(item => item.name),
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '消费',
          type: 'pie',
          radius: '50%',
          data: pieData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
    }
  },
};
</script>

<style scoped>
.topIMG {
  display: flex;
  flex-direction: column; /* 确保子元素水平排列 */
  justify-content: space-around; /* 子元素在容器内分散对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/* 确保图表容器有适当的外边距 */
.topIMG > el-card {
  margin: 20px 10px; /* 根据需要调整外边距 */
}
</style>